@import "variables";
.seed-goods-detail-warp {
  background-color: color($h5,c9);
  padding-bottom: pxTorem(100px);

  .goods-info {
    margin-top: pxTorem(16px);
    background-color: #fff;
    & * {
      @include font-dpr(32px);
      line-height: pxTorem(36px);
      word-break: break-all;
      text-align: justify;
    }
    p {
      margin: pxTorem(20px) 0px;
    }
    img {
      padding: 0px;
    }
    img,
    video {
      width: 100%;
      display: block;
      max-width: 100%;
      margin: pxTorem(15px) 0px;
    }
    video {
      height: pxTorem(50px);
    }
  }

  .goods-part {
    background-color: color($h5,c10);
    padding: pxTorem(30px) pxTorem(30px);
    margin-bottom: pxTorem(20px);
    .goods-title {
      @include font-dpr(34px);
      @include set-color(c2);
      text-align: justify;
    }
    .goods-remarks {
      @include font-dpr(23px);
      @include set-color(c4);
      padding-top: pxTorem(34px);
    }
    .goods-price-box {
      align-items: baseline;
      padding-top: pxTorem(35px);
      @include set-color(c15);
      @include font-dpr(32px);
      //font-weight: bold;
      .goods-price{
        @include font-dpr(48px);
      }
    }
    .cost-price{
      margin-left: pxTorem(20);
      text-decoration:line-through;
      @include  font-size(f2);
      color: color($h5, c4);
    }
    .goods-spec {
      @include font-dpr(32px);
      @include set-color(c2);
      padding-top: pxTorem(30px);
      padding-bottom:pxTorem(30px);
      &:first-child {
        padding-top: 0;    padding-bottom: pxTorem(30px);
      }
      &:last-child {
        padding-top: pxTorem(30px);    padding-bottom: 0;
      }
    }
    .goods-publish-user {
      seed-avatar {
        width: pxTorem(80px);
        height: pxTorem(80px);
      }
      span {
        @include font-dpr(32px);
        @include set-color(c2);
      }
    }

    button[disabled] {
      background-color: color($h5,c9);
    }
    .goods-info-title{
      @include font-dpr(30px);
      @include set-color(c2);
      margin-bottom: pxTorem(16px);
      font-weight: bold;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 0px;
        left: pxTorem(-30px);
        width: pxTorem(5px);
        height: 100%;
        display: block;
        background-color: color($h5, c1);
      }
    }
    .add-border-bottom{
      border-bottom: 1px solid #e8e8e8;
    }
  }
  .seed-modal-dialog {
    height: 80%;
  }
  .seed-modal-dialog {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
  .coupon-list{
    .goods-purchase-content{
      padding: 0 pxTorem(10);
    }
    seed-infinite-scroll{
      overflow: scroll;
    }
  }

}
.goods-purchase-btn {
  width: 100%;
  height: pxTorem(90px);
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 8;
  &.static {
    position: static;
  }
  .collect{
    width: 20%;
    padding: pxTorem(14) 0;
    text-align: center;
    @include font-dpr(24px);
    @include set-color(c4);
    background-color: #fff;
    &::before{
      content: '';
      margin: auto;
      @include icon(40,40,'#{$icons-path}/collect.png');
      display: block!important;
    }
    &.collected{
      &::before{
        @include icon(40,40,'#{$icons-path}/collected.png');
      }
    }
  }
  button {
    width: 100%;
    height: 100%;
    @include font-dpr(30px);
    @include set-color(c10);
    background-color: color($h5, c1);
    &.opacity[disabled]{
      opacity: 0.4;
      background-color: color($h5, c1);
    }
    &[disabled] {
      background-color: color($h5, c5);
      //opacity: .4;
    }
  }
}
.goods-close-btn {
  z-index: 8;
  position: absolute;
  top: pxTorem(20px);
  right: pxTorem(30px);
  @include icon(40px,40px,'#{$icons-path}/event_wrong.png');
}
.goods-purchase-content {
  flex-grow: 1;
  overflow-y: scroll;
  padding: 0px pxTorem(30px);
}

@keyframes bottomToTop {
  from {
    transform:  translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}


